<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内外边距</title>
    <style>
        .box1 {
            width: 300px;
            height: 200px;
            background-color: rgb(129, 233, 219);
            /* 单个设置外边距 */
            /* margin-top: 100px;
            margin-left: 20px;
            margin-bottom: 100px; */
            /* margin:
          1个值：4 周
          2 个值：上下 左右(auto居中)
          3 个值：上 左右(auto居中) 下
          4 个值：上 右 下 左(顺时针)
        */
            margin: 50px auto;

        }

        .box2 {
            width: 300px;
            height: 200px;
            background-color: rgb(182, 242, 122);
            /* 单个设置内边距
            padding，border 都会撑开盒子
            默认情况下盒子的尺寸是，宽高+padding+边框 */
            /* padding-left: 100px;
            padding-top: auto; */
            /* 一次性设置内边距 */
            padding: 10px 20px 30px 40px;
            /* 固定盒子尺寸:
            box-sizing 设置盒模型
            border-box:保证尺寸（推荐）
            content-box:保证内容大小，padding，border 撑开 */
            box-sizing: border-box;

        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            /* 边框,样式,颜色 */
            border: 10px dashed red;
            /* 指定的设置 某个方向的颜色 宽度 */
            /* border-right-width: 20px; */
            /* border-right-color: red; */
            box-sizing: border-box;

        }
    </style>
</head>

<body>
    <div class="box1">外边距盒子1</div>
    <div class="box2">内边距盒子2</div>
    <div class="box3">边框盒子3</div>
</body>

</html>